import React, { useState, useEffect } from 'react';
import { Input, Button, DatePicker, Upload, Alert, Cascader, Space, message } from 'antd';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import moment from 'moment';
import 'antd/dist/antd.less';
import './SecondDetails.less';

export default function SecondDetails(props) {
  const activityList = props.activityList;
  // console.log(activityList);
  // todo 报名数据
  const [signUp, setSignUp] = useState({});
  const [signUpFlag, setSignUpFlag] = useState(false);
  const [signUpFoldFlag, setSignUpFoldFlag] = useState(true);
  const signUpFoldClick = () => {
    setSignUpFoldFlag(!signUpFoldFlag);
  };
  // todo 投票数据
  const [vote, setVote] = useState({});
  const [voteFlag, setVoteFlag] = useState(false);
  const [voteFoldFlag, setVoteFoldFlag] = useState(true);
  const voteFoldClick = () => {
    setVoteFoldFlag(!voteFoldFlag);
  };
  // todo 报名的小标签
  const [optionalLabel, setOptionalLabel] = useState([
    { key: '0', name: '姓名', classTrue: false },
    { key: '1', name: '性别', classTrue: false },
    { key: '2', name: '图片', classTrue: false },
    { key: '3', name: '手机号', classTrue: false },
    { key: '4', name: '生日', classTrue: false },
    { key: '5', name: 'QQ号', classTrue: false },
    { key: '6', name: '邮箱', classTrue: false },
    { key: '7', name: '学院', classTrue: false },
    { key: '8', name: '年纪', classTrue: false },
    { key: '9', name: '班级', classTrue: false },
    { key: '10', name: '学号', classTrue: false },
    { key: '11', name: '特长', classTrue: false },
    { key: '12', name: '备注', classTrue: false },
  ]);
  useEffect(() => {
    // * 报名数据 ---------------------------------------------------------
    // todo 报名数据
    const newSignUp = activityList.activityVOS
      ? activityList.activityVOS.find((item) => {
          return item.activityType == 1;
        })
      : {};
    if (newSignUp?.activityType == 1) {
      setSignUpFlag(true);
      const optionalLabelList = activityList.activityVOS ? newSignUp.requiredEntryForms : [];
      for (let i of optionalLabelList) {
        optionalLabel.forEach((item, index) => {
          if (item.name == i.key) {
            optionalLabel[index].classTrue = true;
          }
        });
      }
      setOptionalLabel([...optionalLabel]);
      setSignUp(newSignUp);
    }
    // * 投票数据 ---------------------------------------------------------
    // todo 投票数据
    const newVote = activityList.activityVOS
      ? activityList.activityVOS.find((item) => {
          return item.activityType == 2;
        })
      : {};
    if (newVote?.activityType == 2) {
      setVoteFlag(true);
      setVote(newVote);
    }
    // * -------------------------------------------------------------------------
    // console.log('123123213', newVote);
  }, [props.activityList]);

  return (
    // 这是详情的第二页
    <div className="secondDetails">
      {/* 这是报名 */}
      <div className="secondDetailsForm" style={{ display: signUpFlag ? 'block' : 'none' }}>
        {/* 大标题 */}
        <div className="secondDetailsFormTitle" onClick={signUpFoldClick}>
          报名
          <div
            className="secondDetailsFormTitleText"
            style={{ display: signUpFoldFlag ? 'block' : 'none' }}
          >
            收起 &nbsp;
            <CaretUpOutlined style={{ color: '#1a257a' }} />
          </div>
          <div
            className="secondDetailsFormTitleText"
            style={{ display: signUpFoldFlag ? 'none' : 'block' }}
          >
            展开 &nbsp;
            <CaretDownOutlined style={{ color: '#1a257a' }} />
          </div>
        </div>
        {/* 内容 */}
        <div
          className="secondDetailsFormContent"
          style={{ display: signUpFoldFlag ? 'block' : 'none' }}
        >
          {/* 小盒子 */}
          <div className="secondDetailsFormContentBox">
            {/* 小标题 */}
            <div className="contentBoxTitle">
              <div className="verticalLine"></div>
              <div className="contentBoxTitleText">基本信息</div>
            </div>
            {/* 小内容 */}
            <div className="contentBoxContent">
              <div className="contentBoxContentBox">
                <div className="contentBoxContentLeft">活动时间：</div>
                <div className="contentBoxContentRight">{`${signUp.startDate} - ${signUp.endDate}`}</div>
              </div>
              <div className="contentBoxContentBox">
                <div className="contentBoxContentLeft">报名人数：</div>
                <div className="contentBoxContentRight">
                  {signUp.numberLimit ? signUp.numberLimit : '不限人数'}
                </div>
              </div>
            </div>
          </div>
          {/* 小盒子 */}
          <div className="secondDetailsFormContentBox">
            {/* 小标题 */}
            <div className="contentBoxTitle">
              <div className="verticalLine"></div>
              <div className="contentBoxTitleText">活动参加者填写的信息</div>
            </div>
            {/* 小内容 */}
            <div className="contentBoxContent">
              <div className="contentBoxContentBox">
                {optionalLabel.map((item) => {
                  return (
                    <div
                      key={item.key}
                      className={
                        item.classTrue ? 'contentBoxContentBtnOver' : 'contentBoxContentBtn'
                      }
                    >
                      {item.name}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
          <div className="secondDetailsFormContentBox">
            {/* 小标题 */}
            <div className="contentBoxTitle">
              <div className="verticalLine"></div>
              <div className="contentBoxTitleText">补充项目</div>
            </div>
            {/* 小内容 */}
            <div className="contentBoxContent">
              {signUp.optionalEntryForms ? (
                signUp.optionalEntryForms.map((item, index) => {
                  return (
                    <div className="contentBoxContentBox" key={index}>
                      <div className="contentBoxContentLeft">项目名称：</div>
                      <div className="contentBoxContentRight">{item.key}</div>
                    </div>
                  );
                })
              ) : (
                <strong style={{ fontSize: '20px' }}>{'想啥呢你没有写这一项'}</strong>
              )}
            </div>
          </div>
        </div>
      </div>
      {/* 这是报名 结束*/}

      {/* 这是投票 */}
      <div className="secondDetailsForm" style={{ display: voteFlag ? 'block' : 'none' }}>
        {/* 大标题 */}
        <div className="secondDetailsFormTitle" onClick={voteFoldClick}>
          投票
          <div
            className="secondDetailsFormTitleText"
            style={{ display: voteFoldFlag ? 'block' : 'none' }}
          >
            收起 &nbsp;
            <CaretUpOutlined style={{ color: '#1a257a' }} />
          </div>
          <div
            className="secondDetailsFormTitleText"
            style={{ display: voteFoldFlag ? 'none' : 'block' }}
          >
            展开 &nbsp;
            <CaretDownOutlined style={{ color: '#1a257a' }} />
          </div>
        </div>
        {/* 内容 */}
        <div
          className="secondDetailsFormContent"
          style={{ display: voteFoldFlag ? 'block' : 'none' }}
        >
          {/* 小盒子 */}
          <div className="secondDetailsFormContentBox">
            {/* 小标题 */}
            <div className="contentBoxTitle">
              <div className="verticalLine"></div>
              <div className="contentBoxTitleText">基本信息</div>
            </div>
            {/* 小内容 */}
            <div className="contentBoxContent">
              <div className="contentBoxContentBox">
                <div className="contentBoxContentLeft">活动时间：</div>
                <div className="contentBoxContentRight">{`${vote.startDate} - ${vote.endDate}`}</div>
              </div>
              <div className="contentBoxContentBox">
                <div className="contentBoxContentLeft">投票方式：</div>
                <div className="contentBoxContentRight">{`只可投${vote.voteWay}次`}</div>
              </div>
            </div>
          </div>
          {/* 小盒子 */}
          <div className="secondDetailsFormContentBox">
            {/* 小标题 */}
            <div className="contentBoxTitle">
              <div className="verticalLine"></div>
              <div className="contentBoxTitleText">投票对象</div>
            </div>
            {/* 小内容 */}
            <div className="contentBoxContent">
              {vote.voteObjectVOS ? (
                vote.voteObjectVOS?.map((item) => {
                  return (
                    <div key={item.id}>
                      <div className="contentBoxContentBox">
                        <div className="rendering">
                          <div className="renderingBox">
                            <div className="renderingLeft">姓名：</div>
                            <div className="renderingRight">{item.name}</div>
                          </div>
                          <div className="renderingBox">
                            <div className="renderingLeft">图片：</div>
                            <div className="renderingRight">
                              <img src={item.pictureUrl} alt="avatar" style={{ height: '90px' }} />
                            </div>
                          </div>
                        </div>
                        <div className="rendering">
                          <div className="renderingBox">
                            <div className="renderingLeft">说明：</div>
                            <div className="renderingRight">{item.instructions}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })
              ) : (
                <img
                  src={'https://img0.baidu.com/it/u=1189326238,3589262802&fm=26&fmt=auto'}
                  alt="avatar"
                  style={{ width: '100%' }}
                />
              )}
            </div>
          </div>
        </div>
      </div>
      {/* 这是投票 结束*/}
    </div>
  );
}
